﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>库存</title>
    <script src="/Apm/js/CMSList.js"></script>
    <style>
        .page {
            height: 100%;
            display: flex;
        }

        .page-left {
            width: 18rem;
            background-color: #d2d2d2;
            overflow-y: auto;
        }

        .content-list {
            display: flex;
            flex-direction: column;
            padding: 0.5rem;
        }

            .content-list label {
                font-family: '楷体';
                font-size: 1rem;
                font-weight: bold;
                padding: 0.2rem;
            }

            .content-list span {
                font-family: '楷体';
                font-size: 1rem;
                padding: 0.2rem;
            }

        .content-info {
            display: flex;
            flex-direction: row;
            padding: 0.2rem;
        }

        .page-li {
            background-color: #f2f2f2;
            border-bottom: solid #fff 2px;
        }

        .page-this {
            background-color: #5FB878;
        }

        .page-right {
            overflow-y: auto;
            width: calc(100% - 18rem);
        }

        iframe {
            border: 0;
            width: 100%;
            height: 100%;
        }

        .content {
            height: calc(100% - 5rem);
        }
        .FlowerImage img {
            width: 4rem;
            height: 4rem;
            border-radius: 0.4rem;
        }
        
    </style>
</head>
<body>
    <div class="page">
        <!--begin 左侧列表-->
        <div class="page-left">
            <ul id="WareHouseList">
                <!--<li id="00001" class="page-li page-this">
                    <div class="content-list">
                        <div class="content-info">
                            <label>仓库编号：</label><span>CG15166844576313</span>
                        </div>
                        <div class="content-info">
                            <label>仓库名称：</label><span>仓库001</span>
                        </div>

                    </div>
                </li>
                <li class="page-li">
                    <div class="content-list">
                        <div class="content-info">
                            <label>仓库编号：</label><span>CG15166844576313</span>
                        </div>
                        <div class="content-info">
                            <label>仓库名称：</label><span>仓库002</span>
                        </div>
                    </div>
                </li>-->


            </ul>
        </div>
        <!--end-->
        <!--begin 右侧内容-->
        <div class="page-right">
            <div class="toolsbar">
                
            </div>
            <div class="content">
                <table id="tabledata" lay-filter="datalist"></table>
            </div>
        </div>
        <!--end-->
    </div>

</body>
</html>
<script type="text/html" id="PictureUrlTpl">
    {{#
        var FnPictureUrl=function(url){
            if(url==""){
                 return '/image/notp.png';
            }
            else{
                return ApiURL + url;
            }
 };
    }}
    <div class="FlowerImage">
        <img src="{{FnPictureUrl(d.PictureUrl)}}" />
    </div>
</script>

<script>

    layui.use('layer', function () {
        var layer = layui.layer;

        BindData();
        

    });
    function Clickli(id) {
        $("#WareHouseList li").removeClass("page-this");
        $("#" + id + "").addClass("page-this");
        StockData(id);
    }
    /**
     * 对应仓库的库存
     * @param guid
     */
    function StockData(guid) {
        layui.use(['table', 'layer'], function () {
            var table = layui.table,
                layer = layui.layer;

            ajaxget({
                url: 'api/FriendFlower/GetStockList?Token=' + MyPublic.getToken() + '&WareHouseGuid=' + guid,
                success: function (data) {

                    table.render({
                        id: 'datalist',
                        elem: '#tabledata',
                        cols: [[
                            { field: 'PictureUrl', title: '图片', width: 120, align: 'center', templet: '#PictureUrlTpl', fixed: 'left' },
                            { field: 'FlowertTypeName', title: '花卉名称', align: 'center', minWidth: 100 },
                            { field: 'NumA', title: 'A品库存', align: 'right' },
                            { field: 'NumB', title: 'B品库存', align: 'right' },
                            { field: 'NumC', title: 'C品库存', align: 'right' },
                            { field: 'NumD', title: 'D品库存', align: 'right' }
                            
                        ]],
                        data: data,
                        height: 'full-68',
                        limit: 20,
                        limits: [20, 40, 60],
                        page: true
                    })
                }
            })

        });
    }

    /**
     * 初始化数据
     */
    function BindData() {
        $("#WareHouseList").empty();
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/FriendFlower/WareHouseList?Token=' + MyPublic.getToken(),
                success: function (data) {
                    if (data == null) {
                        return;
                    }
                    var pagetotal = Math.ceil(data.length / pageSize);//总页数


                    flow.load({
                        elem: '#WareHouseList',
                        isLazyimg: false,//关闭图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {

                                //组合html
                                if (index === 0) {
                                    lis.push('<li id="' + data[index].Guid + '" onclick="Clickli(this.id)" class="page-li page-this">');
                                }
                                else {
                                    lis.push('<li id="' + data[index].Guid + '" onclick="Clickli(this.id)" class="page-li">');
                                }
                                lis.push('<div class="content-list">');
                                lis.push('<div class="content-info">');
                                lis.push(' <label>仓库编号：</label><span>' + data[index].Guid + '</span>');
                                lis.push(' </div>');
                                lis.push('<div class="content-info">');
                                lis.push('<label>仓库名称：</label><span>' + data[index].Name + '</span>');
                                lis.push(' </div>');
                                lis.push(' </div>');
                                lis.push(' </li>');

                            }

                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    //初始化加载对应仓库的库存
                    var id = data[0].Guid;
                    StockData(id);


                }
            })
        });
    }

</script>